<template>
  <div class="eachat">
    <!-- <h2>图表</h2> -->
    <!-- <h2>eachats示例</h2> -->
    <!-- <div id="main" style="width: 600px; height: 400px"></div> -->
    <div id="main" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "VscodeInsidersEachat",

  data() {
    return {};
  },

  mounted() {
    this.eachat();
    // this.eachat1();
  },

  methods: {
    eachat() {
      // 基于准备好的dom，初始化echarts实例

      // var app = {};

      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["year", "2015", "2016", "2017", "2018", "2019"],
            ["一月", 72.4, 53.9, 39.1, 58.5, 38.5],
            [" 二月", 43.3, 85.8, 93.7, 29, 99],
            ["三月", 43.3, 85.8, 93.7, 39.5, 40],
            ["四月", 83.1, 73, 0.4, 55.1, 90, 84],
            ["五月", 26.4, 6.2, 8.5, 56, 63],
            ["六月", 86.4, 65.2, 82.5, 78, 66],
            ["七月", 72.4, 53.9, 39.1, 74, 33],
          ],
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          { type: "bar", bableWidth: 30 },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.eachat {
  width: 80%;
  height: 100%;
  /* background-color:black; */
  /* border: 2px red solid; */
  display: inline-block;
}
</style>